<!--
 * @Author: GKN
 * @Date: 2023-09-14 17:01:08
 * @LastEditTime: 2024-01-22 16:21:14
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\ach\enter\a2.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="po-re" style="height: 496px;">
      <img src="~@/assets/img/cg/cg-b1.jpg" alt="" class="ad-img">
      <div style="width:100%;height: 180px;position:absolute;bottom:-90px;" class="flex flex-j-c">
          <img src="~@/assets/img/cg/cg.png" style="width: 932px;height: 180px;" alt="" class="ad-img">
      </div>
    </div>
      <div class="main mainPadding " style="background:#fff;">
        <div class="max-w">
          <el-breadcrumb separator=">" style="padding-top:98px;">
              <el-breadcrumb-item class="cursor-p" @click="go" v-for="(item,i) in breadcrumb_list" :key="i">{{ item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="MarT" style="height: 470px;">
                <el-empty v-if="list_qycg.length == 0" description="暂无内容" />
                <el-row v-if="list_qycg.length > 0" :gutter="20" style="height: 100%;">
                    <el-col :span="5" style="height: 100%;">
                        <div class="shadow-1" style="height: 33.3%;padding:10px 0;"  @click="goInfo(list_qycg.length>0?list_qycg[0]:'','企业成果库')">
                            <imgView :src="list_qycg.length>0?list_qycg[0].thumb:''" />
                        </div>
                        <div class="shadow-1" style="height: 66.6%;padding:10px 0;" @click="goInfo(list_qycg.length>4?list_qycg[4]:'','企业成果库')">
                            <imgView :src="list_qycg.length>4?list_qycg[4].thumb:''" />
                        </div>
                    </el-col>
                    <el-col :span="5" style="height: 100%;" >
                        <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo(list_qycg.length>1?list_qycg[1]:'','企业成果库')">
                            <imgView :src="list_qycg.length>1?list_qycg[1].thumb:''" />
                        </div>
                        <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo(list_qycg.length>5?list_qycg[5]:'','企业成果库')">
                            <imgView :src="list_qycg.length>5?list_qycg[5].thumb:''" />
                        </div>
                        <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo(list_qycg.length>8?list_qycg[8]:'','企业成果库')">
                            <imgView :src="list_qycg.length>8?list_qycg[8].thumb:''" />
                        </div>
                    </el-col>
                    <el-col :span="5" style="height: 100%;">
                        <div class="shadow-1" style="height: 66.6%;padding:10px 0;" @click="goInfo(list_qycg.length>2?list_qycg[2]:'','企业成果库')">
                            <imgView :src="list_qycg.length>2?list_qycg[2].thumb:''" />
                        </div>
                        <div class="shadow-1" style="height: 33.3%;padding:10px 0;" @click="goInfo(list_qycg.length>6?list_qycg[6]:'','企业成果库')">
                            <imgView :src="list_qycg.length>6?list_qycg[6].thumb:''" />
                        </div>
                    </el-col>
                    <el-col :span="9" style="height: 100%;">
                        <div class="shadow-1" style="height: 50%;padding:10px 0;" @click="goInfo(list_qycg.length>3?list_qycg[3]:'','企业成果库')">
                            <imgView :src="list_qycg.length>3?list_qycg[3].thumb:''" />
                        </div>
                        <div class="shadow-1" style="height: 50%;padding:10px 0;" @click="goInfo(list_qycg.length>7?list_qycg[7]:'','企业成果库')">
                            <imgView :src="list_qycg.length>7?list_qycg[7].thumb:''" />
                        </div>
                    </el-col>
                </el-row>
            </div>
          <div class="MarT p-b">
                <div class="itemv MarB cursor-p" v-for="item in list_qycg.slice(9, list_qycg.length)" :key="item" @click="goInfo(item)" >
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="ad-view" style="height: 224px;">
                                <imgView :src="item.thumb" />
                            </div>
                        </el-col>
                        <el-col :span="16" >
                            <div class="flex-d flex-j-s" style="height: 224px;padding:10px 0;">
                                <div>
                                    <div class="f-title-26 omit-2">{{ item.name }}</div>
                                    <div class="f-desc-14 MarT omit-3">{{ item.blurb }}</div>
                                </div>
                                <div class="f-desc-14" style="text-align: right;"></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
      </div>
  </template>
  
  <script setup>
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import CryptoJS from 'crypto-js';
    import TitleView from '../../components/title.vue';
    import Card1 from '../../components/card1.vue';
    import { useRouter } from "vue-router";
    const Router = useRouter();
    // 路由参数
    const info = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob).item;
    const breadcrumb_list = [{name:'成果库'},{name:'企业成果库'},{name:info.name}]
    // 企业成果库-列表
    const list_qycg = ref([])
    const getqycgkList=()=>{
        const id = info.id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=100&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                list_qycg.value = res.data.data.list
            }
        })
    }
    getqycgkList()
    const goInfo=(item,name)=>{
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:'企业成果库',
                    id:item.newsId,
                    path:'/animatedly/list',
                    first_title:'成果库',
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
    const go=(i,item)=>{
        Router.back()
    }
  </script>
  
  <style lang='less' scoped>
  .mphView{
      flex-wrap: wrap;
      .img:nth-child(1){
          width: 100%;
          height: 420px;
          margin-bottom: 20px;
      }
      .img:nth-child(2){
          width: 40%;
          height: 344px;
          margin-bottom: 20px;
      }
      .img:nth-child(3){
          padding: 0 20px;
          width: 30%;
          height: 344px;
          margin-bottom: 20px;
      }
      .img:nth-child(4){
          width: 30%;
          height: 344px;
          margin-bottom: 20px;
      }
  }
  </style>
  